<template>
  <BasicModal
    @register="register"
    :title="title"
    width="600px"
    :destroyOnClose="true"
    :canFullscreen="false"
    :okText="groupData.id ? `确定修改` : `确定添加`"
    @ok="handleOk"
  >
    <Form :model="groupData" :label-col="{ style: { width: '150px' } }" :wrapper-col="{ span: 14 }">
      <FormItem label="分组名称">
        <Input v-model:value="groupData.name" placeholder="请输入分组名称" :maxLength="14" :disabled="!!groupData.groupType" />
      </FormItem>
      <FormItem label="产品展示样式：">
        <RadioGroup v-model:value="groupData.styleType">
          <Radio :value="ProductDisplay.GRID">
            <span>宫格列表</span>
            <img src="@/assets/images/grid.png" class="mt-2" />
          </Radio>
          <Radio :value="ProductDisplay.ROW">
            <span>横向列表</span>
            <img src="@/assets/images/row.png" class="mt-2" />
          </Radio>
        </RadioGroup>
      </FormItem>
    </Form>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { Form, FormItem, Input, RadioGroup, Radio } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref, unref } from 'vue';
  import { TemplateGroupItem } from '@/api/hby/resourceLeague/type';
  import {
    addMerchantTemplateGroup,
    setMerchantTemplateGroup,
  } from '@/api/hby/resourceLeague/index';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useRouter } from 'vue-router';
  import { ProductDisplay } from '@/enums/resourceLeague';

  const emit = defineEmits(['register', 'refresh']);

  const title = ref('添加产品分组');

  const groupData = ref({} as TemplateGroupItem);
  const [register, { closeModal }] = useModalInner((data: TemplateGroupItem) => {
    groupData.value = data;
    title.value = data.id ? '编辑产品分组' : '添加产品分组';
  });

  const { createMessage } = useMessage();
  const { currentRoute } = useRouter();

  function handleOk() {
    if (groupData.value.id) {
      setMerchantTemplateGroup(unref(groupData)).then(() => {
        emit('refresh');
        createMessage.success('修改分组成功');
        closeModal();
      });
    } else {
      const { id } = currentRoute.value.query;
      addMerchantTemplateGroup({ ...unref(groupData), templateId: id }).then(() => {
        emit('refresh');
        createMessage.success('添加分组成功');
        closeModal();
      });
    }
  }
</script>
<style lang="less"></style>
